{% extends "base.html" %}
{% block title %}创建ingress页面{% endblock %}
{% block loadbalancer %}layui-nav-itemed{% endblock %}
{% block loadbalancer_ingress %}layui-this{% endblock %}
{% block body %}
    <span class="layui-breadcrumb span-float" lay-separator="/">
      <a href="/">首页</a>
      <a href='{% url "loadbalancer:ingress" %}'>工作负载</a>
      <a href='{% url "loadbalancer:ingress" %}'>ingress</a>
      <a><cite>创建ingress</cite></a>
   </span>
    <form class="layui-form layui-form-pane" action="" style="margin-left: 10px; margin-top: 10px; margin-right: 10px;">
        <div class="layui-form-item">
            <label class="layui-form-label">名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" autocomplete="off" lay-verify="required" placeholder="请输入ingress名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">namespace</label>
            <div class="layui-input-block layui-form">
                <select name="ingress_namespace" id="ingress_namespace" lay-filter="ingress_namespace"></select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">HOST</label>
            <div class="layui-input-block">
                <input type="text" name="host" autocomplete="off" lay-verify="required" placeholder="请输入域名"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">PATH</label>
            <div class="layui-input-block">
                <input type="text" name="path" autocomplete="off" lay-verify="required" placeholder="请输入访问路径"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">PATH TYPE</label>
            <div class="layui-input-block">
                <input type="text" name="path_type" autocomplete="off" placeholder="请输入路径类型，例：Exact,Prefix,ImplementationSpecific"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">SERVICE</label>
            <div class="layui-input-block">
                <input type="text" name="service" autocomplete="off" placeholder="请输入service名称"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">端口</label>
            <div class="layui-input-block">
                <input type="text" name="port" autocomplete="off" placeholder="请输入端口"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <button class="layui-btn" lay-submit="" lay-filter="submit">提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </form>
{% endblock %}

{% block js %}
    <script>
        layui.use(['form', 'layedit', 'laydate', 'jquery'], function () {
            var form = layui.form
                , layer = layui.layer
                , layedit = layui.layedit
                , laydate = layui.laydate
                , $ = layui.jquery;

            // select 动态获取内容
            $.ajax({
                type: "GET",
                url: '{% url "namespace_api" %}',
                async: false,
                success: function (res) {
                    let ingress_select = $("#ingress_namespace")
                    if (res.code == 0) {
                        //遍历数据
                        $.each(res.data, function (index) {
                            ns = res.data[index];
                            ingress_select.append('<option value=' + ns.name + '>' + ns.name + '</option>')
                        })
                        ingress_select.val(namespace)
                        form.render(ingress_select)
                    } else {
                        layer.msg(res.msg)
                        ingress_select.append('<option value=' + 'default' + '>' + res.msg + '</option>')
                    }
                },
                error: function (res) {
                    layer.msg("服务器接口异常")
                }
            })

            //监听提交
            form.on('submit(submit)', function (data) {
                data = data.field;
                csrf_token = $('[name="csrfmiddlewaretoken"]').val();
                data['csrfmiddlewaretoken'] = csrf_token;
                $.ajax({
                    url: {% url "ingress_api" %},
                    type: "POST",
                    data: data,
                    dataType: 'json',
                    success: function (res) {
                        if (res.code == '0') {
                            layer.msg(res.msg, {icon: 6});
                            document.location.href = "{% url 'loadbalancer:ingress' %}", true;
                        } else {
                            layer.msg(res.msg, {icon: 5})
                        }
                    }, error: function (res){
                        layer.msg(res.msg, {icon: 5});
                    }
                })
                return false;
            });

        });
    </script>
{% endblock %}
